<template>
	<div id="home">
		<mt-swipe :auto="0">
			<mt-swipe-item v-for="item in data"><img :src="item.cover.origin" /></mt-swipe-item>
		</mt-swipe>
		<ul>
			<li v-for="item in data" @click="Location(item.id)">
				<img :src="item.cover.origin" />
				<div class="row clearfix">
					<div class="left fl">
						<h1 v-text="item.intro"></h1>
						<div class="count">
							<span>{{item.cinemaCount}}</span>
							<span>家影院上映</span>
							<span>{{item.watchCount}}</span>
							<span>人购票</span>
						</div>
					</div>
					<div class="right fr">
						<span v-text="item.grade"></span>
					</div>
				</div>
			</li>
		</ul>
		<router-link to="movie/hot">
			<div class="more">更多热映电影</div>					
		</router-link>
		<div class="line">
			<div class="upcoming">即将上映</div>
		</div>
		<ul>
			<li v-for="item in coming" @click="Location(item.id)">
				<img :src="item.cover.origin" />
				<div class="row clearfix">
					<div class="coming_left fl">
						<h1 v-text="item.name"></h1>
					</div>
					<div class="coming_right fr">
						<span>{{gettime(item.premiereAt)}}</span><span>上映</span>
					</div>
				</div>
			</li>
		</ul>
		<router-link to="movie/coming">
			<div class="more">更多即将上映电影</div>			
		</router-link>
	</div>
</template>

<script>
	//js
	//引入axios插件
	import axios from "axios";
	export default {
		created: function() {
			//当index被引入渲染时，就开始发起请求
			var now_this = this;
			axios.get("https://m.maizuo.com/v4/api/film/now-playing",{
				params: {
					count: 5,
					page: 1,
				}
			}).then(function(res) {
				//成功的回调
				now_this.data = res.data.data.films;
			}).catch(function(err) {
				//失败的回调
				console.warn(err)
			});
			axios.get("https://m.maizuo.com/v4/api/film/coming-soon?",{
				params: {
					count: 3,
					page: 1,
				}
			}).then(function(res) {
				now_this.coming = res.data.data.films;
			}).catch(function(err) {
				console.warn(err)
			});
		},
		data: function() {
			return {
				data: "",
				coming: ""
			}
		},
		methods: {
			Location: function(p) {
				//通过$router.push的方法，传路径
				//和location.href的用法一致，直接传地址就可以使用了
				this.$router.push({
					path: "/details",
					query: {
						id: p //传参
					}
				});
			},
			gettime: function(time) {
				var time = new Date(time);
				return (time.getMonth() + 1) + "月" + time.getDate()+"日";
			},
		}
	}
</script>

<style lang="scss">
	/*lang="scss" 识别成scss*/
	/*引入其他scss*/
	
	@import "../scss/home.scss";
	/*直接编写scss*/
	
	
</style>